<template>
	<view class="page reservation_details_page">
		<view class="card details">
			<view class="card_title">预约信息</view>
			<view class="card_contet">
				<view class="item_text">
					<view class="title">
						预约时间:
					</view>
					<view class="text">
						{{$dayjs(detail.appointTime).format('YYYY-MM-DD')}} <span class="tips">2天后</span>
					</view>
				</view>
				<view class="item_text flex-start">
					<view class="title">
						预约医生:
					</view>
					<view class="content">
						<doctorInfo :item="{
							name:detail.doctorName,
							titleName:detail.titleName,
							departName:detail.departName,
							levelName:detail.levelName,
							hospitalName:detail.hospitalName
						}"></doctorInfo>
					</view>
				</view>
				<view class="item_text">
					<view class="title">
						就诊地址:
					</view>
					<view class="text ">
						<view class="location">
							{{detail.adress || ''}}
							<view class="tips" v-if="detail.adress">
								导航
							</view>
						</view>
					</view>
				</view>
				<view class="item_text">
					<view class="title">
						预约编号:
					</view>
					<view class="text">
						{{detail.no}}
					</view>
				</view>
				<view class="item_text">
					<view class="title">
						提交时间:
					</view>
					<view class="text">
						{{$getDate(detail.submitTime)}}
					</view>
				</view>
			</view>
		</view>
		<view class="card patient">
			<view class="patient_info">
				<view class="item_avatar">
					<image
						:src="detail.patientAvatar || 'https://admin.yuanfenjihua.com/admin-api/infra/file/0/get/7d485f174dd88232f08d5d0ea6d05b153a3857402e3ce776d2c1eca015cad0cb.png'"
						mode="scaleToFill"></image>
				</view>
				<view class="item_info">
					<view class="info_name">
						<view class="name">
							{{detail.patientName}}
						</view>
						<view class="tips blue">
							已实名
						</view>
					</view>
					<view class="info_other">
						<view>
							{{detail.patientSex == 1?'男':'女'}}
						</view>
						<view>
							{{detail.patientAge}}岁
						</view>
						<view>
							{{detail.patientIdCard || ''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card disease" v-if="detail.consultationFormRespVO">
			<view class="card_title">
				病情描述
			</view>
			<view class="card_contet">
				<view class="item_info">
					<view class="item_title">
						身高/体重
					</view>
					<view class="item_text">
						{{`${detail.consultationFormRespVO.height || 0}CM/${detail.consultationFormRespVO.weight || 0}KG`}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						您觉得现在最主要的不适是什么，请详细描述下?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.diseaseDescribe || '无'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						您发病的时候，伴随那些其他的不适?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.otherDiscomforts|| '无'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						本次生病是否去医院就诊过？哪家机构
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.hospitalIf==0?'否':detail.consultationFormRespVO.hospitalName?detail.consultationFormRespVO.hospitalName:'是'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						做了哪些检查和治疗，结果和效果如何?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.results|| '无'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						当前是否有正在使用的药物?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.medicationIf==1?'是':'否'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						是否有过手术或放化疗等重大疾病治疗经历及慢性病史?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.radiotherapyIf==1?'是':'否'}}
					</view>
				</view>
				<!-- 		<view class="item_info">
					<view class="item_title">
						请上传能反应患者病情的相关资料?
					</view>
					<view class="item_text">
						180CM/60KG
					</view>
				</view> -->
				<view class="item_info">
					<view class="item_title">
						想获得什么帮助?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.consultationDescribe || '无'}}
					</view>
				</view>
			</view>
		</view>
		<view class="note">
			<view class="note_title">
				<image class="icon" src="@/static/icon/reservation/note_icon.png" mode="scaleToFill"></image>
				<view class="text">
					特别提示
				</view>
			</view>
			<view>
				本平台不收取任何费用，就诊产生的费用均在医院缴纳
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryMyAppointDetail
	} from '@/api/index.js'
	export default {
		name: 'reservationDetails',
		data() {
			return {
				id: 0,
				detail: {}
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.queryMyAppointDetail(this.id)
		},
		methods: {
			queryMyAppointDetail(id) {
				queryMyAppointDetail({
					id
				}).then(res => {
					this.detail = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reservation_details_page {
		.card {
			margin-bottom: 30rpx;
		}

		.details {
			.item_text {
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				&.flex-start {
					align-items: flex-start;
				}

				.title {
					flex: 0 0 120rpx;
					color: #999999;
				}

				.text {
					margin-left: 20rpx;

					.tips {
						display: inline-block;
						padding: 6rpx 15rpx;
						margin-left: 15rpx;
						color: #3E6EFE;
						border: 1px solid #3E6EFE;
						border-radius: 10rpx;
						font-size: 22rpx;
					}

					.location {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-radius: 100rpx;
					}
				}

				.content {
					margin-left: 20rpx;
					background: #F8FAFB;
					border-radius: 10rpx;
					padding: 20rpx 10rpx;
				}
			}
		}

		.patient {
			position: relative;
			padding: 40rpx 20px;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.patient_info {
				display: flex;
				align-items: center;

				.item_avatar {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item_info {
					margin-left: 20rpx;
					font-size: 22rpx;
					color: #999999;

					.info_name,
					.info_other {
						display: flex;
						align-items: center;

						&>view {
							margin-right: 10rpx;

							&:last-child {
								margin: 0;
							}
						}
					}

					.info_name {
						margin-bottom: 20rpx;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.tips {
							padding: 6rpx 10rpx;
							border-radius: 10rpx;
							font-size: 22rpx;
							margin-left: 20rpx;

							&.blue {
								color: #3B6CFE;
								background-color: #F3F8FF;
							}

							&.gray {
								color: #999;
								background-color: #f5f5f5;
							}
						}
					}
				}
			}
		}

		.disease {
			.card_contet {
				padding: 20rpx;

				background-color: #FAFAFA;
				border-radius: 20rpx;


				.item_info {
					padding: 0 20rpx;
					margin-bottom: 20rpx;

					.item_title {
						position: relative;
						color: #999;
						font-size: 26rpx;
						margin-bottom: 20rpx;

						&::before {
							content: "";
							position: absolute;
							left: -20rpx;
							top: 50%;
							width: 10rpx;
							height: 10rpx;
							background-color: #999;
							border-radius: 100%;
							transform: translate(-50%, -50%);
						}
					}
				}

				.item_text {
					font-size: 26rpx;
					color: #333;
				}
			}
		}

		.note {
			color: #D81E06;
			font-size: 28rpx;

			.note_title {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 30rpx;
					height: 30rpx;
				}

				.text {
					margin-left: 10rpx;
				}
			}
		}
	}
</style>